<script setup>
import { computed, onMounted, reactive, ref } from "vue"
import { info,save } from '@/api/account'
import { list as roleList } from '@/api/role'
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { ElMessage } from "element-plus"

const router = useRouter()
const route = useRoute()
const store = useStore()
const formRef = ref()
const loading = ref(false)
const saving = ref(false)
const formLabel = computed(() => {
  return store.state.windowWidth <= 768 ? 'top' : 'right'
})
const form = reactive({
  username: '',
  nickname: '',
  password: '',
  role_id: undefined,
  status: 1,
})
const rules = reactive({
  username: [{required: true, message: "请输入"}],
  role_id: [{required: true, message: "请选择"}],
})
const roles = ref([])
onMounted(async() => {
  loading.value = true
  try {
    roles.value = await roleList({ page_size: -1 })

    if (route.query.id) {
      const res = await info({ id: route.query.id })
      for (const k in form) {
        if (k == 'password') continue
        if (res[k]) {
          form[k] = res[k]
        }
      }
    }
  } finally {
    loading.value = false
  }
})

function onFormSubmit() {
  if (saving.value) return
    formRef.value.validate(async (v) => {
      if (!v) return
      saving.value = true
      try {
        await save({
          id: route.query.id,
          ...form
        })
        ElMessage.success('保存成功')
        router.go(-1)
      } finally {
        saving.value = false
      }
    })
  }
function goback() {
  router.go(-1)
}

</script>

<template>
  <el-form ref="formRef" class="form"
  label-width="auto" :label-position="formLabel"
  :model="form" :rules="rules">
    <div v-loading="loading" class="form-inputs">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input  v-model="form.password" placeholder="输入密码以修改" />
      </el-form-item>
      <el-form-item label="角色" prop="role_id">
        <el-select v-model="form.role_id">
          <el-option v-for="item in roles" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="form.status" :label="0">禁用</el-radio>
        <el-radio v-model="form.status" :label="1">启用</el-radio>
      </el-form-item>
    </div>
    <el-form-item class="form-submits">
      <el-button type="primary" @click="onFormSubmit" :loading="saving">保存</el-button>
      <el-button @click="goback">返回</el-button>
    </el-form-item>
  </el-form>
  
</template>

<style scoped>
  .form {
    background: #fff;
  }
  .form-inputs {
    padding-bottom: 60px;
    width: 70%;
    margin: 0 auto;
  }
  .form-submits {
    position: absolute;
    bottom: -18px;
    right: 0;
    width: calc(100% - 40px);
    background: #f2f2f2;
    padding: 20px;
    z-index: 1202;
  }
  @media only screen and (max-width: 768px) {
    .form-inputs {
      width: 100%;
      margin: 0;
    }
  }
</style>